<template>
  <view class="category">
    <!-- 搜索框 -->
    <YgSearch></YgSearch>

    <!-- 内容 -->
    <view class="content">
      <!-- 左 -->
      <view class="left">
        <view
          :class="currentIndex === index ? 'title-item active' : 'title-item'"
          @click="handleMenuSelect(index)"
          v-for="(item, index) in titles"
          :key="item"
          >{{ item }}</view
        >
      </view>
      <!-- 右 -->
      <scroll-view class="right" scroll-y :scroll-top="scrollTop">
        <view class="goods_group" v-for="item1 in goods" :key="item1.cat_id">
          <view class="goods-title">{{ item1.cat_name }}</view>
          <view class="goods-list">
            <navigator
              v-for="item2 in item1.children"
              :key="item2.cat_id"
              :url="'/pages/goods_list/goods_list?id=' + item2.cat_id"
            >
              <image mode="widthFix" :src="item2.cat_icon"></image>
              <view class="goods-subtitle">{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
//申请回来的数据先用全局变量保存  不是直接渲染到页面的变量 尽量放在外面，这样有利于提升小程序性能
let categories = [];
export default {
  data() {
    return {
      titles: [], //标题
      goods: [], //右侧要显示的商品内容
      currentIndex: 0, //选中标题的索引
      scrollTop: 0, //滚动条的距离
    };
  },
  async onLoad() {
    //测试代码 小程序本地存储的使用
    // 1.使用过程中类似h5的本地存储， 但是又有所区别
    // 2.h5本地存储 智能存储字符串，如果存复杂数据类型，会导致数据丢失
    // 3. 小程序 可以直接存储和获取复杂数据类型   比较方便

    //同步获取获取本地存储的数据
    let storageCategory = uni.getStorageSync("category");
    //判断这个缓存是否有数据
    if (storageCategory) {
      //  有 ？  是否过期  设置过期时间30s
      if (Date.now() - storageCategory.time > 1000 * 30) {
        // console.log("过期了");
        this.getCategory();
      } else {
        // console.log("没有过期，可以直接使用");
        categories = storageCategory.data;
        this.titles = categories.map((v) => v.cat_name);
        this.goods = categories[0].children;
      }
    } else {
      console.log("没数据");
      this.getCategory();
    }
  },

  methods: {
    //请求分类数据
    async getCategory() {
      const res = await this.$u.get("categories");
      categories = res.message;
      this.titles = categories.map((v) => v.cat_name);
      this.goods = categories[0].children;
      //同步存储数据到本地缓存
      uni.setStorageSync("category", { time: Date.now(), data: res.message });
    },

    //点击左侧标题传过来的索引
    handleMenuSelect(index) {
      this.currentIndex = index;
      this.goods = categories[index].children;

      // 每次点击右侧的滚动条位置置顶   每次设置的值不能重复，否则不生效  //每次设置一个小于1的小数 效果一样
      this.scrollTop = Math.random() * Math.random();
    },
  },
};
</script>

<style lang="scss">
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  display: flex;
  overflow: hidden;
  .left {
    width: 180rpx;
    overflow: auto; //内容超出时 显示滚动条

    //标题
    .title-item {
      height: 80rpx;
      font-size: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .active {
      color: $themeColor;
    }
  }
  .right {
    flex: 1;
    overflow: auto;

    .goods_group {
      .goods-title {
        height: 80rpx;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .goods-list {
        display: flex;
        flex-wrap: wrap;

        navigator {
          width: 33.33%;
          text-align: center;

          image {
            width: 60%;
          }

          .goods-subtitle {
            font-size: 26rpx;
          }
        }
      }
    }
  }
}
</style>